<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- 注册组件时候使用的组件名称，在视图中使用就是自定义标签的名称 -->
    <!-- 注意：组件的名称不能和原生html标签重名 -->
    <com-article></com-article>
  </div>
  <script src="./vue.js"></script>
  <script>
    // 全局注册组件
    Vue.component('com-article', {
      // 组件配置对象，和vue实例的配置对象基本一致，没有el选项
      // template选项必须指定，当前组件管理的视图，需要有一个根标签。
      // 在模板字符中，可以使用插值表达式，和任意指令，但是只能使用当前组件数据和函数。
      template: '<div>{{count}} <button @click="add()">自增1</button></div>',
      // 声明数据，使用的还是data，但是是一个函数，函数的返回值才是组件的数据，必须是对象。
      data () {
        return {
          count: 100
        }
      },
      // 可以使用任意配置选项
      methods: {
        add () {
          this.count ++ 
        }
      }
    })

    // 根实例
    const vm = new Vue({
      el: '#app'
    })
  </script>
</body>
</html>